<template>
  <div id="sp">
    <el-header>
      <div id="header-left" class="el-icon-menu">
        <span>商品管理</span>
      </div>
    </el-header>
    <hr size="2px" color="#e9eef3" />
    <!-- 控件按钮 -->
    <div class="header_btn">
      <el-button type="primary" @click="skippage1">添加商品种类</el-button>
      <el-button type="success" @click="skippage2">查看商品类别</el-button>
      <el-button type="primary" @click="skippage3">添加商品</el-button>
      <el-button type="success" @click="skippage4">查看商品</el-button>
      <div class="sel">
        <el-button v-on:click="tankuang">搜索商品</el-button>
      </div>
      <transition name="el-fade-in-linear">
        <div class="tk" v-show="!showtan">
          <div class="ect">
            <el-select
              v-model="value1"
              placeholder="一级类别"
              @change="select_firstf"
            >
              <el-option
                v-for="item in goods_first"
                :key="item.goods_one_type_name"
                :label="item.goods_one_type_name"
                :value="item.goods_one_type_name"
              >
              </el-option>
            </el-select>
          </div>
          <div class="ect">
            <el-select
              v-model="values"
              placeholder="二级类别"
              @keyup.enter.native="handleClick"
            >
              <el-option
                v-for="item in goods_second"
                :key="item.goods_two_type_name"
                :label="item.goods_two_type_name"
                :value="item.goods_two_type_name"
              >
              </el-option>
            </el-select>
          </div>
          <div class="put">
            <el-input
              v-model="input1"
              placeholder="请输入商品名称"
              @keyup.enter.native="handleClick"
            ></el-input>
          </div>
          <div class="put">
            <el-input
              v-model="input2"
              placeholder="请输入商品条码"
              @keyup.enter.native="handleClick"
            ></el-input>
          </div>
        </div>
      </transition>
    </div>
    <!--主题表单-->
    <div id="main">
      <!--添加商品种类-->
      <div class="tabs" ref="page1" id="page1">
        <template>
          <el-tabs v-model="activeName" @tab-click="handClick">
            <el-tab-pane label="添加一级类别" name="first">
              <table class="table">
                <tr>
                  <td>商品类名</td>
                  <td>
                    <el-input
                      v-model="add_first_value"
                      placeholder="请输入一级商品类名"
                    ></el-input>
                  </td>
                  <td>
                    <el-button type="primary" @click="addfirst">添加</el-button>
                  </td>
                </tr>
              </table>
            </el-tab-pane>
            <el-tab-pane label="添加二级类别" name="second">
              <table class="table">
                <tr>
                  <td>选择一级类名</td>
                  <td>
                    <el-select
                      v-model="select_goods_first"
                      placeholder="选择一级商品类名"
                      @change="select_firstf"
                    >
                      <el-option
                        v-for="item in goods_first"
                        :key="item.goods_one_type_name"
                        :label="item.goods_one_type_name"
                        :value="item.goods_one_type_name"
                      >
                      </el-option>
                    </el-select>
                  </td>
                </tr>
                <tr>
                  <td>二级商品类名</td>
                  <td>
                    <el-input
                      v-model="add_second_value"
                      placeholder="请输入二级商品类名"
                    ></el-input>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td>
                    <el-button type="primary" class="button" @click="addsecond"
                      >添加</el-button
                    >
                  </td>
                </tr>
              </table>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>

      <!--查看商品类别-->
      <div class="tabs" ref="page2" id="page2">
        <table class="table">
          <tr>
            <td>
              <el-select
                v-model="type"
                placeholder="请选择一级类别"
                @change="select_first"
              >
                <el-option
                  v-for="item in goods_first"
                  :key="item.goods_one_type_name"
                  :label="item.goods_one_type_name"
                  :value="item.goods_one_type_name"
                >
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select
                v-model="value2"
                placeholder="请选择二级类别"
                @change="select_second"
              >
                <el-option
                  v-for="item in goods_second"
                  :key="item.goods_two_type_name"
                  :label="item.goods_two_type_name"
                  :value="item.goods_two_type_name"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
        </table>

        <div class="Hpage">
          <el-table
            :data="tableData1"
            style="width: 100%"
            class="eltb"
            height="500"
          >
            <el-table-column prop="id" label="商品类品ID" width="180">
            </el-table-column>
            <el-table-column prop="type_name" label="商品类别名称" width="180">
            </el-table-column>
            <el-table-column prop="goods_level" label="级别"> </el-table-column>
            <el-table-column prop="goods_father_level" label="父级类别">
            </el-table-column>
            <el-table-column prop="goods_content" label="描述">
            </el-table-column>
            <el-table-column prop="goods_remark" label="备注">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handlelockk(scope.$index, scope.row)"
                  >锁定</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog title="商品类别信息" :visible.sync="dialogFormVisible">
          <el-form
            :model="ruleForm"
            :rules="ruless"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品类品ID" prop="id">
              <el-input v-model="ruleForm.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="商品类别名称" prop="type_name">
              <el-input
                v-model="ruleForm.type_name"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="级别" prop="goods_level">
              <el-select
                v-model="ruleForm.goods_level"
                placeholder="请选择"
                :disabled="true"
              >
                <el-option label="一级" value="level1"></el-option>
                <el-option label="二级" value="level2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="父级类别" prop="goods_father_level">
              <el-input
                v-model="ruleForm.goods_father_level"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="goods_content">
              <el-input
                v-model="ruleForm.goods_content"
                type="textarea"
                :rows="2"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="goods_remark">
              <el-input
                v-model="ruleForm.goods_remark"
                type="textarea"
                :rows="2"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update_level"
              >确 定 修 改</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!--添加商品-->
      <div class="tabs" ref="page3" id="page3">
        <div class="addxx">
          <div class="add">
            <el-form
              :label-position="labelPosition"
              label-width="120px"
              :model="formLabelAlign"
              :rules="rules"
              ref="formLabelAlign"
              class="demo-ruleForm"
            >
              <el-form-item label="条码" prop="goods_bar_code">
                <div class="ress">
                  <el-input
                    v-model="formLabelAlign.goods_bar_code"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="商品名称" prop="goods_name">
                <div class="ress">
                  <el-input
                    v-model="formLabelAlign.goods_name"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="add">
            <el-form
              :label-position="right"
              label-width="120px"
              :model="formLabelAlign"
              :rules="rules"
              ref="formLabelAlign"
              class="demo-ruleForm"
            >
              <el-form-item label="一级商品类别" prop="goods_one_type_name">
                <div class="ress">
                  <el-select
                    placeholder="请选择一级类别"
                    v-model="formLabelAlign.goods_one_type_name"
                    @change="select_firstt"
                  >
                    <el-option
                      v-for="item in goods_first"
                      :key="item.goods_one_type_name"
                      :label="item.goods_one_type_name"
                      :value="item.goods_one_type_name"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="单位" prop="goods_unit">
                <div class="ress">
                  <el-input
                    v-model="formLabelAlign.goods_unit"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="add">
            <el-form
              :label-position="right"
              label-width="120px"
              :model="formLabelAlign"
              :rules="rules"
              ref="formLabelAlign"
              class="demo-ruleForm"
            >
              <el-form-item label="二级商品类别" prop="goods_two_type_name">
                <div class="ress">
                  <el-select
                    placeholder="请选择二级类别"
                    v-model="formLabelAlign.goods_two_type_name"
                  >
                    <el-option
                      v-for="item in goods_second"
                      :key="item.goods_two_type_name"
                      :label="item.goods_two_type_name"
                      :value="item.goods_two_type_name"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="当前售价" prop="goods_price">
                <div class="ress">
                  <el-input
                    v-model="formLabelAlign.goods_price"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <el-button type="primary" class="addbutton" @click="add_goods"
          >添加商品</el-button
        >
      </div>

      <!--查看商品-->
      <div class="tabs" ref="page4" id="page4">
        <template>
          <el-table
            :data="fenyelist"
            style="width: 100%"
            class="eltb"
            height="400"
            v-bind="$attrs"
            v-on="$listeners"
          >
            <el-table-column prop="goods_id" label="流水号" width="100">
            </el-table-column>
            <el-table-column prop="goods_bar_code" label="条码" width="100">
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="goods_unit" label="单位"> </el-table-column>
            <el-table-column prop="goods_price" label="当前售价">
            </el-table-column>
            <el-table-column prop="goods_amount" label="进货数量">
            </el-table-column>
            <el-table-column prop="goods_one_type_name" label="一级类别">
            </el-table-column>
            <el-table-column prop="goods_two_type_name" label="二级类别">
            </el-table-column>
            <el-table-column label="操作" width="200" prop="lock">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEditt(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handlelock(scope.$index, scope.row)"
                  >锁定</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-dialog title="商品信息" :visible.sync="dialogFormVisiblee">
            <el-form
              :model="Form"
              :rules="rulesss"
              ref="Form"
              label-width="120px"
              class="demo-ruleForm"
            >
              <el-form-item label="流水号" prop="goods_id">
                <el-input v-model="Form.goods_id" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="条码" prop="goods_bar_code">
                <el-input v-model="Form.goods_bar_code"></el-input>
              </el-form-item>
              <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="Form.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="单位" prop="goods_unit">
                <el-input v-model="Form.goods_unit"></el-input>
              </el-form-item>
              <el-form-item label="当前售价" prop="goods_price">
                <el-input v-model="Form.goods_price"></el-input>
              </el-form-item>
              <el-form-item label="进货数量" prop="goods_amount">
                <el-input v-model="Form.goods_amount"></el-input>
              </el-form-item>
              <el-form-item label="一级类别" prop="goods_one_type_name">
                <el-input
                  v-model="Form.goods_one_type_name"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="二级类别" prop="goods_two_type_name">
                <el-input
                  v-model="Form.goods_two_type_name"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisiblee = false">取 消</el-button>
              <el-button type="primary" @click="update_goods"
                >确 定 修 改</el-button
              >
            </div>
          </el-dialog>
        </template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[6, 12, 18, 24]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="商品查询结果" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column prop="goods_id" label="流水号" width="100">
        </el-table-column>
        <el-table-column prop="goods_bar_code" label="条码" width="100">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
        <el-table-column prop="goods_unit" label="单位"> </el-table-column>
        <el-table-column prop="goods_price" label="当前售价"> </el-table-column>
        <el-table-column prop="goods_amount" label="进货数量">
        </el-table-column>
        <el-table-column prop="goods_one_type_name" label="一级类别">
        </el-table-column>
        <el-table-column prop="goods_two_type_name" label="二级类别">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      showtan: true,
      dialogFormVisible: false,
      dialogFormVisiblee: false,
      dialogTableVisible: false,
      labelPosition: "right",
      right: "right",
      add_first_value: "",
      add_second_value: "",
      select_goods_first: "",
      lock1: false,
      values: "",
      value1: "",
      type: "",
      value2: "",
      input1: "",
      input2: "",
      options: [],
      ruleForm: {
        id: "",
        type_name: "",
        goods_level: "",
        goods_father_level: "",
        goods_content: "",
        goods_remark: "",
      },
      formLabelAlign: {
        goods_name: "",
        goods_bar_code: "",
        goods_one_type_name: "",
        goods_unit: "",
        goods_two_type_name: "",
        goods_price: "",
      },
      Form: {
        goods_id: "",
        goods_bar_code: "",
        goods_name: "",
        goods_unit: "",
        goods_price: "",
        goods_amount: "",
        goods_one_type_name: "",
        goods_two_type_name: "",
      },
      rulesss: {
        goods_id: [
          { required: true, message: "请输入流水号", trigger: "change" },
        ],
        goods_bar_code: [
          { required: true, message: "请输入条码", trigger: "change" },
        ],
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "change" },
        ],
        goods_unit: [
          { required: true, message: "请输入单位", trigger: "change" },
        ],
        goods_price: [
          { required: true, message: "请输入当前售价", trigger: "change" },
        ],
        goods_amount: [
          { required: true, message: "请输入进货数量", trigger: "change" },
        ],
        goods_one_type_name: [
          { required: true, message: "请输入一级类别", trigger: "change" },
        ],
        goods_two_type_name: [
          { required: true, message: "请输入二级类别", trigger: "change" },
        ],
      },
      ruless: {
        id: [{ required: true, message: "", trigger: "change" }],
        type_name: [{ required: true, message: "", trigger: "change" }],
        goods_level: [{ required: true, message: "", trigger: "change" }],
        goods_content: [
          { required: true, message: "请输入描述信息", trigger: "change" },
        ],
        goods_father_level: [
          { required: true, message: "", trigger: "change" },
        ],
        goods_remark: [
          { required: true, message: "请输入备注信息", trigger: "change" },
        ],
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "change" },
        ],
        goods_bar_code: [
          { required: true, message: "请输入商品条码", trigger: "change" },
        ],
        goods_one_type_name: [
          { required: true, message: "请选择一级类别名", trigger: "change" },
        ],
        goods_unit: [
          { required: true, message: "请输入单位", trigger: "change" },
        ],
        goods_two_type_name: [
          { required: true, message: "请输入二级类别名", trigger: "change" },
        ],
        goods_price: [
          { required: true, message: "请输入销售价格", trigger: "change" },
        ],
      },
      tableData1: [],
      tableData: [],
      goods_first: [],
      serch: [],
      goods_second: [],
      data: [],
      gridData: [],
      currentPage: 1, //当前页
      pageSize: 6, //一页显示多少条数据
    };
  },
  methods: {
    handlelock(index, row) {
      console.log(index, row);
      if (row.goods_lock == 0) {
        row.goods_lock = 1;
      } else {
        row.goods_lock = 0;
      }
    },
    handlelockk() {
      this.lock1 = !this.lock1;
    },
    handleClick() {
      this.dialogTableVisible = true;
      this.gridData = [];
      this.serch = [];
      for (var i = 0; i < this.tableData.length; i++) {
        if (
          this.value1 == this.tableData[i].goods_one_type_name &&
          this.values == this.tableData[i].goods_two_type_name
        ) {
          if (
            this.input1 == this.tableData[i].goods_name ||
            this.input2 == this.tableData[i].goods_bar_code ||
            (this.input1 == this.tableData[i].goods_name &&
              this.input2 == this.tableData[i].goods_bar_code)
          ) {
            this.gridData = this.serch.concat(this.tableData[i]);
          } else if (this.input1 == "" && this.input2 == "") {
            this.serch = this.serch.concat(this.tableData[i]);
            this.gridData = this.serch;
          }
        }
      }
      this.input2 = "";
      this.input1 = "";
      this.value1 = "";
      this.values = "";
      console.log(this.gridData);
    },
    handleEditt(index, row) {
      if (row.goods_lock == 1) {
        this.dialogFormVisiblee = true;
        console.log(index, row);
        this.Form.goods_id = row.goods_id;
        this.Form.goods_bar_code = row.goods_bar_code;
        this.Form.goods_name = row.goods_name;
        this.Form.goods_unit = row.goods_unit;
        this.Form.goods_price = row.goods_price;
        this.Form.goods_amount = row.goods_amount;
        this.Form.goods_one_type_name = row.goods_one_type_name;
        this.Form.goods_two_type_name = row.goods_two_type_name;
      } else {
        this.$message({
          message: "该表格行已锁定，请解锁后修改内容！",
          type: "warning",
        });
      }
    },
    update_goods() {
      this.dialogFormVisiblee = false;
      this.$axios
        .get("/admin/alterAllGoodsMsg", {
          params: {
            goods_id: this.Form.goods_id,
            goods_bar_code: this.Form.goods_bar_code,
            goods_name: this.Form.goods_name,
            goods_unit: this.Form.goods_unit,
            goods_price: this.Form.goods_price,
            goods_amount: this.Form.goods_amount,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.open3();
            this.table_xuanran();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    update_level() {
      this.dialogFormVisible = false;
      this.$axios
        .get("/admin/alterTypeMsg", {
          params: {
            id: this.ruleForm.id,
            type_name: this.ruleForm.type_name,
            goods_level: this.ruleForm.goods_level,
            goods_father_level: this.ruleForm.goods_father_level,
            goods_content: this.ruleForm.goods_content,
            goods_remark: this.ruleForm.goods_remark,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.skippage2();
            this.open3();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    add_goods() {
      this.$axios
        .get("/admin/addGoods", {
          params: {
            goods_name: this.formLabelAlign.goods_name,
            goods_bar_code: this.formLabelAlign.goods_bar_code,
            goods_one_type_name: this.formLabelAlign.goods_one_type_name,
            goods_unit: this.formLabelAlign.goods_unit,
            goods_two_type_name: this.formLabelAlign.goods_two_type_name,
            goods_price: this.formLabelAlign.goods_price,
          },
        })
        .then((res) => {
          if (res.data.code == 520) {
            this.open1();
          } else if (res.data.code == 200) {
            this.open2();
            this.table_xuanran();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      this.goods_id = "";
      (this.goods_bar_code = ""), (this.goods_name = "");
      this.goods_unit = "";
      this.goods_price = "";
      this.goods_amount = "";
      this.goods_one_type_name = "";
      this.goods_two_type_name = "";
    },
    addsecond() {
      if (this.select_goods_first && this.add_second_value) {
        this.$axios
          .get("/admin/addTwoTypeName", {
            params: {
              goods_one_type_name: this.select_goods_first,
              goods_two_type_name: this.add_second_value,
            },
          })
          .then((res) => {
            console.log(res);
            this.open2();
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        this.open1();
      }
      this.select_goods_first = "";
      this.add_second_value = "";
    },
    addfirst() {
      if (this.add_first_value) {
        this.$axios
          .get("/admin/addOneTypeName", {
            params: {
              goods_one_type_name: this.add_first_value,
            },
          })
          .then((res) => {
            console.log(res);
            this.open2();
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        this.open1();
      }
    },
    handleEdit(index, row) {
      if (this.lock1 == false) {
        console.log(index, row);
        this.dialogFormVisible = true;
        this.ruleForm.id = row.id;
        this.ruleForm.type_name = row.type_name;
        this.ruleForm.goods_level = row.goods_level;
        this.ruleForm.goods_father_level = row.goods_father_level;
        this.ruleForm.goods_content = row.goods_content;
        this.ruleForm.goods_remark = row.goods_remark;
      } else {
        this.$message({
          message: "该表格行已锁定，请解锁后修改内容！",
          type: "warning",
        });
      }
    },
    handClick(tab, event) {
      console.log(tab, event);
    },
    skippage1() {
      this.$refs.page1.style.display = "block";
      this.$refs.page2.style.display = "none";
      this.$refs.page3.style.display = "none";
      this.$refs.page4.style.display = "none";
    },
    skippage2() {
      this.$refs.page1.style.display = "none";
      this.$refs.page2.style.display = "block";
      this.$refs.page3.style.display = "none";
      this.$refs.page4.style.display = "none";
      this.$axios({
        url: "/admin/queryAllType",
        method: "get",
        data: {
          id: this.id,
        },
      }).then((data) => {
        this.tableData1 = data.data.data;
        for (var i = 0; i < data.data.data.length; i++) {
          this.tableData1 = this.tableData1.concat(this.tableData1[i].children);
        }
        this.data = this.tableData1;
      });
      this.type = "";
      this.value2 = "";
    },
    skippage3() {
      this.$refs.page1.style.display = "none";
      this.$refs.page2.style.display = "none";
      this.$refs.page3.style.display = "block";
      this.$refs.page4.style.display = "none";
    },
    skippage4() {
      this.$refs.page1.style.display = "none";
      this.$refs.page2.style.display = "none";
      this.$refs.page3.style.display = "none";
      this.$refs.page4.style.display = "block";
    },
    table1_xuanran() {
      this.$axios({
        url: "/admin/queryAllType",
        method: "get",
        data: {
          id: this.id,
        },
      }).then((data) => {
        this.tableData1 = data.data.data;
        for (var i = 0; i < data.data.data.length; i++) {
          this.tableData1 = this.tableData1.concat(this.tableData1[i].children);
        }
        this.data = this.tableData1;
      });
      this.type = "";
      this.value2 = "";
    },
    table_xuanran() {
      this.$axios({
        url: "/admin/queryAllGoodsMsg",
        method: "get",
        data: {
          goods_id: this.goods_id,
        },
      }).then((data) => {
        this.tableData = data.data.data;
      });
    },
    xuanran() {
      this.$axios({
        url: "/admin/queryOneTypeName",
        method: "get",
        data: {},
      }).then((data) => {
        this.goods_first = data.data.data;
      });
    },
    tankuang() {
      //搜索商品弹出
      this.showtan = !this.showtan;
    },
    handleCurrentChange(currentPage) {
      // 改变页码
      this.currentPage = currentPage;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    select_first() {
      this.$axios
        .get("/admin/queryTwoTypeName", {
          params: {
            goods_one_type_name: this.type,
          },
        })
        .then((res) => {
          this.goods_second = res.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
      this.tableData1 = [];
      this.serch = [];
      for (var i = 0; i < this.data.length; i++) {
        if (this.type == this.data[i].type_name) {
          this.tableData1 = this.serch.concat(this.data[i]);
        }
      }
      this.value2 = "";
    },
    select_second() {
      this.tableData1 = [];
      this.serch = [];
      for (var i = 0; i < this.data.length; i++) {
        if (this.value2 == this.data[i].type_name) {
          this.tableData1 = this.serch.concat(this.data[i]);
        }
      }
    },
    select_firstt() {
      this.$axios
        .get("/admin/queryTwoTypeName", {
          params: {
            goods_one_type_name: this.formLabelAlign.goods_one_type_name,
          },
        })
        .then((res) => {
          this.goods_second = res.data.data;
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
      this.formLabelAlign.goods_two_type_name = "";
    },
    select_firstf() {
      this.$axios
        .get("/admin/queryTwoTypeName", {
          params: {
            goods_one_type_name: this.value1,
          },
        })
        .then((res) => {
          this.goods_second = res.data.data;
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
      this.values = "";
    },
    open2() {
      this.$message({
        message: "添加成功！",
        type: "success",
      });
    },
    open1() {
      this.$message({
        message: "添加失败，请输入数据！",
        type: "warning",
      });
    },
    open3() {
      this.$message({
        message: "修改成功！",
        type: "success",
      });
    },
  },
  created() {
    this.xuanran();
    this.table_xuanran();
  },
  computed: {
    total() {
      // 计算一共多少条数据
      return this.tableData.length;
    },
    fenyelist() {
      // 实时计算当前页码显示的数据
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
};
</script>
<style scoped>
.addbutton {
  width: 20%;
  margin-left: 40%;
  margin-top: 30px;
}
.add {
  width: 30%;
  float: left;
  margin-top: 20px;
}
.ress {
  width: 200px;
}
.addxx {
  margin-left: 5%;
}
.addxx,
#page3:after {
  content: "";
  clear: both;
  display: block;
}
.tk .put {
  width: 140px;
  float: left;
}
.tk .ect {
  width: 120px;
  float: left;
}
.tk {
  float: right;
}
#sp .block {
  padding-left: 30%;
  padding-top: 20px;
}
.el-tabs {
  background: #eee;
}
#sp .eltb {
  margin-top: 15px;
}
#sp #main {
  box-sizing: border-box;
  padding: 20px;
  margin-top: 20px;
  width: 100%;
  background: #eee;
  overflow: hidden;
}
#sp #main .tabs {
  background: #eee;
  width: 100%;
  height: 600px;
}
#sp #page2 {
  display: none;
}
#sp #page3 {
  display: none;
}
#sp #page4 {
  display: none;
}
#tabs1 {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}
#sp .header_btn button:hover {
  background: #deedf7;
  color: #409eff;
}
.header_btn {
  box-sizing: border-box;
  margin-top: 20px;
  padding-left: 30px;
  width: 100%;
  height: 70px;
  text-align: left;
  line-height: 70px;
  background: #eee;
  border-radius: 10px 10px;
}
.sel {
  box-sizing: border-box;
  float: right;
  margin-right: 20px;
}
.ad tr td {
  padding: 0px;
}
#addtable td {
  padding-right: 20px;
  padding-top: 20px;
}
.level {
  float: left;
}
#tabs {
  background: #333;
}
#main #span1 {
  margin-right: 300px;
}
#main span {
  line-height: 80px;
}
#header-left {
  float: left;
}
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header::after {
  content: "";
  display: block;
  clear: both;
}
.el-tabs {
  background-color: white;
  margin: 0 auto;
  width: 100%;
}
#main {
  margin-top: 20px;
  height: 100%;
  background-color: white;
}
.table td {
  padding-left: 10px;
  padding-top: 10px;
}
.button {
  width: 222px;
  float: left;
}
.el-tabs.el-tabs--top {
  background-color: #eee !important;
}
</style>